<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>返回
        </Button>
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="140">
            <h3>项目基本情况</h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row class="line-style">
                            <Col span="21">
                                <Form-item label="项目名称" prop="xmmc">
                                    <i-input type="text" v-model="formCustom.xmmc" placeholder="请输入项目名称"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <h3>参与建设单位情况</h3>
            <Card>
                <div class="line-wrap">
                    <div class="line-main">
                        <div v-for="(item,index) in formCustom.cyjsdw_info" :key="index" class="tenderDiv">
                            <Row class="line-style" >
                                <Col span="7">
                                    <Form-item :prop="`cyjsdw_info[${index}].xz`" :rules="[{ required: true, message: '请选择单位性质', trigger: 'change' }]" label="单位性质">
                                        <RadioGroup v-model="item.xz">
                                            <Radio v-for="item in xmnrTypeList" :key="item.id" :label="item.codemc">
                                                {{item.codemc}}
                                            </Radio>
                                        </RadioGroup>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="单位名称" :prop="`cyjsdw_info[${index}].name`" :rules="[{ required: true, message: '单位名称必填', trigger: 'blur' }]">
                                        <i-input type="text" v-model="item.name" placeholder="请输入单位名称"></i-input>
                                        <!--<Cascader :data="jsdwList" v-model="item.name" change-on-select placeholder="请选择单位"></Cascader>-->
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="投资金额" :prop="`cyjsdw_info[${index}].tzje`" :rules="[{ required: true,type:'number', message: '投资金额必填', trigger: 'blur' },{ validator: validateFloat, trigger: 'blur' }]">
                                        <i-input type="number" number  v-model="item.tzje" placeholder="请输入投资金额"><span slot="append">万元</span></i-input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <!--<Row class="line-style" >
                                <Col span="7">
                                    <Form-item label="联系人" :prop="`cyjsdw_info[${index}].lxr`" :rules="[{ required: true, message: '联系人必填', trigger: 'blur' }]">
                                        <i-input type="text" v-model="item.lxr" placeholder="请输入联系人" ></i-input>
                                    </Form-item>
                                </Col>
                                <Col span="7">
                                    <Form-item label="手机号" :prop="`cyjsdw_info[${index}].phone`" :rules="[{ required: true, message: '手机号必填', trigger: 'blur' }]">
                                        <i-input type="text" v-model="item.phone" placeholder="请输入手机号" ></i-input>
                                    </Form-item>
                                </Col>
                            </Row>-->
                            <Row class="line-style" v-if="item.xz === '企业方'">
                                <Col span="21">
                                    <Form-item label="投资情况概述" :prop="`cyjsdw_info[${index}].remarks`" :rules="[{ required: true, message: '投资情况概述必填', trigger: 'blur' }]">
                                        <i-input type="textarea" v-model="item.remarks" :rows="5"
                                                 placeholder="请输入投资情况概述，简单说明投资比例金额，实际投资情况，成立公司情况等"></i-input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row class="line-style" v-if="item.xz === '企业方'">
                                <Col span="21">
                                    <Form-item label="成立企业名称" :prop="`cyjsdw_info[${index}].busine_name`" :rules="[{ required: true, message: '成立企业名称必填', trigger: 'blur' }]">
                                        <i-input type="text" v-model="item.busine_name" placeholder="请输入成立企业名称"></i-input>
                                    </Form-item>
                                </Col>
                            </Row>
                            <Row style="text-align: center">
                                <Col v-if="!showDetail">
                                    &nbsp;&nbsp;<Button type="success" @click="addLine()">添加单位</Button>&nbsp;&nbsp;
                                    <Button type="error" @click="delLine(index)">删除单位</Button>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </div>
            </Card>
            <h3></h3>
            <Card class="line-style">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row class="line-style">
                            <Col span="7">
                                <Form-item label="联系人" prop="lxr" >
                                    <i-input type="text" v-model="formCustom.lxr" placeholder="请输入联系人"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="手机号" prop="sjh">
                                    <i-input type="text" v-model="formCustom.sjh" placeholder="请输入手机号"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row class="line-style">
                            <Col span="21">
                                <Form-item label="项目情况概述" prop="xmqkms">
                                    <i-input type="textarea" v-model="formCustom.xmqkms" :rows="5" placeholder="请输入项目情况概述"></i-input>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row class="line-style">
                            <Col span="7">
                                <Form-item label="合同签订日期" >
                                    <DatePicker @on-change="startChange($event,1)"  :value="formCustom.htqdrq"
                                                format="yyyy-MM"  type="month" placeholder="请选择合同签订日期"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="建设期">
                                    <i-input type="text" v-model="formCustom.jsq" placeholder="请输入建设期"></i-input>
                                </Form-item>
                            </Col>
<!--                            <Col span="7">-->
<!--                                <Form-item label="上报日期" prop="sbrq">-->
<!--                                    <DatePicker @on-change="dateChange" :options="options1" :value="formCustom.sbrq"-->
<!--                                                format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>-->
<!--                                </Form-item>-->
<!--                            </Col>-->
                        </Row>
                    </div>
                </div>
            </Card>
        </Form>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showDetail">
            <Col>
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </Col>
        </Row>
        <Modal v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>

    </div>
</template>

<script>
import { insert, getById, getDictInfoList, getJsdwList } from '@/api/outbreak-management/government-Informationization-project/ppp-project'
// ppp项目
export default {
  data () {
    return {
      validateFloat: (rule, value, callback) => {
        const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
        if (!reg.test(value)) {
          callback(new Error('金额必填最多只允许两位小数'))
        } else {
          callback()
        }
      },
      // 是否企业方
      isBusine: false,
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      formCustom: {
        // 项目名称
        xmmc: '',
        cyjsdw_info: [{
          xz: '', // 单位性质
          name: '', // 单位名称
          // name: [], // 单位名称
          tzje: '', // 投资金额
          // lxr: '', // 联系人
          // phone: '', // 手机号
          remarks: '', // 企业方概述--企业方特有
          busine_name: ''// 成立企业名称--企业方特有
        }],
        // 联系人
        lxr: '',
        // 手机号
        sjh: '',
        // 项目情况概述
        xmqkms: '',
        // 合同签订日期
        htqdrq: '',
        // 建设期
        jsq: ''
        // 上报日期
        // sbrq: ''
      },
      xmnrTypeList: [], // 项目类型字典
      jsdwList: [], // 建设单位字典
      options1: { // 不可选今天之后的日期
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      ruleCustom: {
        xmmc: [
          { required: true, message: '项目名称必填', trigger: 'blur' }
        ],
        lxr: [
          { required: true, message: '联系人必填', trigger: 'blur' }
        ],
        sjh: [
          { required: true, message: '手机号必填', trigger: 'blur' }
        ],
        xmqkms: [
          { required: true, message: '项目情况概述必填', trigger: 'blur' }
        ]
        // htqdrq: [
        //   { required: true, message: '合同签订期必填', trigger: 'blur' }
        // ]
        // jsq: [
        //  { required: true, message: '建设期必填', trigger: 'blur' }
        // ]
        // sbrq: [
        //   { required: true, message: '上报日期必填', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },

    /**
       * 日期格式化
       */
    dateChange (date) {
      // this.formCustom.sbrq = date
    },
    /**
       * 日期格式化
       */
    startChange (date, index) {
      if (index === 1) {
        this.formCustom.htqdrq = date
      }
    },
    handleSubmit () {
      let requestData = { ...this.formCustom }
      if (requestData.id) {
        requestData.type = '0'
      }
      requestData.cyjsdw_info = JSON.stringify(requestData.cyjsdw_info)
      insert(requestData).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('保存成功!')
        } else {
          this.$Message.error('保存失败!')
        }
      })
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.getEditData(this.$route.query.id)
      }
    },
    getEditData (id) {
      getById({ id }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0) {
          this.formCustom = res
          // this.formCustom.sbrq = (res.sbrq === '' || res.sbrq == null ? null : this.$common.moment(res.sbrq).format('YYYY-MM-DD'))
          this.formCustom.htqdrq = (res.htqdrq === '' || res.htqdrq == null ? null : this.$common.moment(res.htqdrq).format('YYYY-MM'))
          this.formCustom.cyjsdw_info = JSON.parse(res.cyjsdw_info)
        }
      })
    },
    // 调用字典方法
    // queryDictInfo (type) {
    // getDictInfoList({ type: type }).then(({ data }) => {
    //   let { errcode, data: res } = data
    //   if (errcode === 0 && res.length > 0) {
    //     let formList = []
    //     res.forEach(item => {
    //       let { label, value } = item
    //       let formObj = { label: label, value: value }
    //       formList.push(formObj)
    //       if (type === 'card_type') {
    //         // 证件类型
    //         this.cardTypeList = formList
    //       }
    //       if (type === 'result_type') {
    //         // 检测结果
    //         this.resultTypeList = formList
    //       }
    //     })
    //   }
    // })
    // },
    addLine () {
      this.formCustom.cyjsdw_info.push(
        {
          xz: '', // 单位性质
          name: '', // 单位名称
          // name: [], // 单位名称
          tzje: '', // 投资金额
          // lxr: '', // 联系人
          // phone: '', // 手机号
          remarks: '', // 企业方概述--企业方特有
          busine_name: ''// 成立企业名称--企业方特有
        })
    },
    delLine (index) {
      let len = this.formCustom.cyjsdw_info.length
      if (len === 1) {
        this.$Message.warning('只有一条数据不允许删除!')
        return
      }
      this.formCustom.cyjsdw_info.splice(index, 1)
    },
    changeDwxz (val) {
      if (val === '政府方') {
        this.isBusine = false
      } else {
        this.isBusine = true
      }
    },
    // 调用字典方法
    queryDictInfo (type) {
      getDictInfoList({ type: type }).then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0 && res.length > 0) {
          if (type === 'xmjb_type') {
            // 项目类型
            this.xmnrTypeList = res
          }
        }
      })
    },
    // 调用字典方法--建设单位
    queryJsdwList () {
      getJsdwList().then(({ data }) => {
        let { errcode, data: res } = data
        if (errcode === 0 && res.length > 0) {
          let formList = []
          res.forEach(item => {
            if (item.yjpid === '0') {
              formList.push({ value: item.yidw, label: item.yidw, id: item.yjpid })
            } else {
              getJsdwList({ yjpid: item.yjpid }).then(({ data }) => {
                formList.push({ value: item.yidw, label: item.yidw, id: item.yjpid, children: data.data, loading: false })
              })
            }
          })
          this.jsdwList = formList
        }
      })
    }
  },
  created () {
    // this.queryJsdwList() // 建设单位字典
    this.isEditStatus()
    this.queryDictInfo('xmjb_type') // 项目类型
  },
  mounted () {
  }
}
</script>
<style scoped>
    h3{
        margin: 10px auto;
    }
    .tenderDiv{
        border:solid 1px #dcdee2;
        margin: 4px 4px;
        padding: 4px
    }
</style>
